import React from 'react'
// ===================================================================== global declare
const { $http, $fn, $async } = window
// ===================================================================== global antd
const message = import('@antd/message')
// ===================================================================== global template
const Pagination = $async(()=>import('@antd/pagination'))
// ===================================================================== private template
const Page = $async(()=>import('#tp/page-content'))
// ===================================================================== private component
const Table = $async(()=>import('#cpt/table'))
// ===================================================================== config declare

// ===================================================================== component
export default class extends React.Component{
	state = {
		pag: {},
		data:[],
		infoData:[],
		selectedKeys:[],
		ids:[],
		btns : [
			{ label:'同步', onClick:() => {
				const ids = this.state.selectedKeys.map(v=>v['id'])
				$http.submit(this,'specimen/pull', { param:{ spec_code: ids }, loadingText:'数据同步中...' }).then(data=>{
					message.then(f=>f.default.success('数据同步成功'))
					this.fetch(this.model)
				})
			} },
		],
	}
	
	componentDidMount(){
		this.fetch()
	}
	model = {}
	// paging
	fetch = param => $fn.fetch.call(this,'specimen/index', param)
	// select

	
	cols = [
		{ type:'checkbox' },
		{ title: '标本箱编号', 	field: 'box_num', 		width:100, align:'tc' },
		{ title: '医院名称', 	field: 'hosp_name', 	minWidth:250 },
		{ title: '条码号', 		field: 'spec_code', 	width:150, align:'tc' },
		{ title: '采样时间', 	field: 'coll_time', 	width:200, align:'tc' },
		{ title: '项目状态', 	field: 'spec_status',	width:150, align:'tc', render: ({ text }) =>{
			if(+text === 1){ return '待审核' }
			else if(+text === 2){ return '审核通过' }
			else{ return '待完善' }
		}},
		{ title: '加做项目', 	field: 'additional_kind',width:150, align:'tc',render:({ text }) => +text === 1 ? '是' : '否' },
		{ title: '录入时间', 	field: 'created_at',	width:150, align:'tc'},
	]
	
	cols2 = [
		{ title: '项目列表', 	field: 'kind_name'  },
	]
	
	render(){
		const { btns, data, pagingLoading, pullLoading, pag, infoData } = this.state
		return (
			<Page title='项目清单' btns={btns}>
				<div className='fx ex'>
					<div className='ex fv'>
						<Table
							cols			= { this.cols }
							data 			= { data }
							loading 		= { pagingLoading }
							onRow			= { (selectedKeys, rows) => {
								this.setState({ selectedKeys })
								$http.pull(this,'specimen/info', { param:{ id:rows.id }, dataName:'infoData'} )
							} }
						/>
					</div>
					<div className='ml20 fv' style={{width:300}}>
						<Table
							cols			= { this.cols2 }
							data 			= { infoData }
							loading 		= { pullLoading }
						/>
					</div>
				</div>
				{
					$fn.hasArray(data) && <Pagination
						size		= 'small'
						pag			= { pag }
						onChange	= { (current, pageSize) => $fn.pageChange.call(this,{current, pageSize}) }
					/>
				}
			</Page>
		)
	}
}